<template>
    <div>
        {{str |  toUpperCase | suffix$}}
        <br/>
        {{num | suffix$}}
        <ul>
            <li v-for="(item,index) in arr" :key="index">
                价格： {{item.num | tofixed | suffix$}}
            </li>
            <li>总计： {{ arr | sum | tofixed | suffix$}}</li>
        </ul>
    </div>
</template>

<script>
//filter 全局 filters 局部
export default {
    // 过滤器
    filters:{
        //自定义过滤器名称，会接受要处理的值
        toUpperCase(value){
            return value.toLocaleUpperCase()
        },
        //给数字加后缀的
        suffix$(num){
            return num + '$'
        },
        //合计
        sum(arr){
            return arr.reduce((a,b)=>{
               return a+b.num;
            },0)
        },
        tofixed(num){
            const _num=Number.parseFloat(num)
            return _num.toFixed(2);
        }
    },
    methods:{
        // toUpperCase(value){
        //     return value.toLocaleUpperCase();
        // }
    },
    name:'Index',
    data(){
        return {
            str:'welcome you',
            num:100,
            arr:[
               {num: 12},
               {num: 15},
               {num: 35}, 
            ]
        }
    }
}
</script>

<style>

</style>